<template>
  <div class="schedule-table">
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>早班</th>
          <th>中班</th>
          <th>晚班</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="day in days" :key="day.date">
          <td>{{ day.date }}</td>
          <td>{{ day.morning }}</td>
          <td>{{ day.afternoon }}</td>
          <td>{{ day.night }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      days: [
        { date: '2021-01-01', morning: '张三', afternoon: '李四', night: '王五' },
        // 其他日期的数据...
      ]
    }
  }
}
</script>

<style scoped>
.schedule-table {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 5px;
}
</style>

Umasou 16:43:31
<template>
  <div>
    <h2>{{ month }} 排班表</h2>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>班次</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="date in dates" :key="date">
          <td>{{ date }}</td>
          <td>{{ schedule[date] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: '2022年1月', // 修改为当前月份
      dates: [], // 存储当前月份所有日期
      schedule: { // 存储排班信息，可以从后端接口获取或者自定义
        '2022-01-01': '白班',
        '2022-01-02': '白班',
        '2022-01-03': '夜班',
        // ...
      }
    };
  },
  mounted() {
    this.generateDates();
  },
  methods: {
    generateDates() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const daysInMonth = new Date(year, month, 0).getDate();
      for (let i = 1; i <= daysInMonth; i++) {
        const date = `${year}-${month.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
        this.dates.push(date);
      }
    }
  }
};
</script>

Umasou 23:04:28
vue+element ui以日期时间为表头展示人员的早中晚排班表的代码

Umasou 23:04:58
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column v-for="date in dates" :key="date" :label="date" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.schedule[date]">
            <div v-if="scope.row.schedule[date].morning">早班</div>
            <div v-if="scope.row.schedule[date].afternoon">中班</div>
            <div v-if="scope.row.schedule[date].evening">晚班</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          schedule: {
            '2022-01-01': { morning: true, afternoon: false, evening: true },
            '2022-01-02': { morning: false, afternoon: true, evening: false },
            '2022-01-03': { morning: true, afternoon: true, evening: false },
          },
        },
        {
          name: '李四',
          schedule: {
            '2022-01-01': { morning: false, afternoon: true, evening: false },
            '2022-01-02': { morning: true, afternoon: false, evening: true },
            '2022-01-03': { morning: false, afternoon: false, evening: true },
          },
        },
      ],
    };
  },
  computed: {
    dates() {
      const dates = new Set();
      this.tableData.forEach((item) => {
        Object.keys(item.schedule).forEach((date) => {
          dates.add(date);
        });
      });
      return Array.from(dates).sort();
    },
  },
};
</script>

